<template>
    <div>
        <template v-for="(item, index) in menuList">
            <div :class="`shrink-menu-content shrink-menu-icon-${theme}`" :key="index">
                <Dropdown v-if="item.children.length != 1" placement="right-start" :key="index" @on-click="changeMenu">
                    <div class="shrink-icon" :class="{ active: item.name == openNames[0] }">
                        <XIcon :size="20" :type="item.icon"></XIcon>
                    </div>
                    <DropdownMenu style="width: 200px" slot="list">
                        <DropdownItem :name="child.name" :key="i" v-for="(child, i) in item.children" :selected="$route.name == child.name">
                            <XIcon :type="child.icon"></XIcon>
                            <span style="padding-left: 10px">{{ itemTitle(child) }}</span>
                        </DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Dropdown v-else placement="right-start" :key="index" @on-click="changeMenu">
                    <Tooltip :content="item.title" placement="right">
                        <div @click="changeMenu(item.children[0].name)" class="shrink-icon" :class="{ active: item.name == openNames[0] }">
                            <XIcon :size="20" :type="item.children[0].icon || item.icon"></XIcon>
                        </div>
                    </Tooltip>
                </Dropdown>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: 'sidebarMenuShrink',
    props: {
        menuList: {
            type: Array
        },
        theme: {
            type: String,
            default: 'darkblue'
        },
        openNames: {
            type: Array
        }
    },
    methods: {
        changeMenu(active) {
            this.$emit('on-change', active);
        },
        itemTitle(item) {
            if (typeof item.title == 'object') {
                return this.$t(item.title.i18n);
            } else {
                return item.title;
            }
        }
    }
};
</script>
